<template>
	<view>
		<view class="contentBox">
			<view class="sectionTitle">
				{{storeInfo.storeName|filterNull}}
				<text class="serviceMode">{{storeInfo.serviceMode|filterNull}}</text>
			</view>
			<view class="storeInfo">
				<view>营业时间: {{storeInfo.businessStartTime +'至' + storeInfo.businessEndTime}}</view>
				<view>
					网点地址: {{storeInfo.addrDetail|filterNull}}
					<image @click="goNavi" style="width: 30upx; height: 30upx;" src="../static/location-navi.png" mode=""></image>
				</view>
			</view>
		</view>
		
		<view class="contentBox" v-if="urls.length>0">
			<view class="sectionTitle">
				网点实景图
			</view>
		    <u-album multipleSize="215" :urls="urls"></u-album>
		</view>
		
		
		<view class="contentBox">
			<view class="sectionTitle">
				服务热线
			</view>
			<view class="serviceInfo">
			  <text>微信在线客服</text>
			  <button open-type="contact">在线客服</button>
		    </view>
			<view class="serviceInfo">
			  <text>拨打客服电话</text>
			  <text @click="callPhone">{{storeInfo.contactPhone|filterNull}}</text>
			</view>
		
	   </view>
     </view>
</template>

<script>
	import setting from '@/settings.js'
	import {clientStoreInfo} from '@/api/home-api.js'
	import {bd09ToGcj02} from '@/utils/utils.js'
	export default {
		data() {
			return {
				storeId : '',
				storeInfo : {},
				urls:[]
			}
		},
		onLoad(op) {
           this.storeId = op.storeId;
		   this.getStoreInfo();
		},
		methods: {
			
		   getStoreInfo() {
		   	  clientStoreInfo({
				  tenantId : this.$store.state.user.tenantId,
				  storeId : this.storeId
			  }).then(res=> {
				  this.storeInfo = res.data;
				  if(this.storeInfo.storeUrl.length>0) {
					  let storeUrls = this.storeInfo.storeUrl.split(',');
					  for (let path of storeUrls) {
					  	let url = setting.baseImageUrl + path;
						this.urls.push(url);
					  }
				  }
			  })
		   },
           goNavi() {
			  let result = bd09ToGcj02(this.storeInfo.lat, this.storeInfo.lon)
			   uni.openLocation({ //​使用微信内置地图查看位置。
			   	latitude: result[0], 
			   	longitude: result[1],
				// latitude: this.storeInfo.lat,
				// longitude: this.storeInfo.lon,
			   	name: this.storeInfo.storeName,
				address: this.storeInfo.addrDetail,
			   	success() {
			   		console.log('成功了');
			   	},
			   	fail(msg) {
			   		console.log(msg);
			   	}
			   })
		   },
		   callPhone() {
			   if(this.storeInfo.contactPhone) {
			   	uni.makePhoneCall({
			   		phoneNumber: this.storeInfo.contactPhone,
			   		success: (res) => {
			   			console.log('拨打电话成功');
			   		}
			   	})
			   }else {
			   	this.$u.toast('手机号为空,无法拨打');
			   }
		   }
		}
	}
</script>

<style lang="scss" scoped>
	.contentBox {
		margin: 20upx 25upx 0;
		padding: 16upx;
		background-color: $bg-white-color;
		border-radius: 16upx;
		position: relative;
		.sectionTitle {
			color: $text-color-33;
			font-size: 30upx;
			font-weight: bold;
			margin-bottom: 20upx;
		}
		.serviceMode {
			color: $text-color-33;
			font-size: 30upx;
			font-weight: bold;
			position: absolute;
			right: 28upx;
			top: 28upx;
		}
		
	}
	.storeInfo {
		view {
			color: $text-color-99;
			font-size: 28upx;
			margin-bottom: 20upx;
		}
		view:nth-child(2) {
			display: flex;
			justify-content: space-between;
		}
	}
	
	.serviceInfo {
		display: flex;
		justify-content: space-between;
		position: relative;
		text {
		  color: $text-color-99;
		  font-size: 28upx;
		  margin-bottom: 20upx;
		}
		text:nth-child(2) {
			color: $main-color;
		}
		button{
			display: inline;
			color: $main-color;
			font-size: 28upx;
			background: 0;
			border-radius: 0;
			position: absolute;
			right: -10px;
			bottom: 2px;
			&::after{
		       border: none;
			}
		}
	}
	
</style>
